import React, { useState } from "react";
import instance from "@/request/request";
import { Button, Modal, Form, Input, message } from "antd";
import type { FormProps } from 'antd';
type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};
function Shade() {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('账号密码',values)
     instance.post("/user/list", {userName:values.username,password:values.password}).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
            message.success("登录成功");
            setIsModalOpen(false);
        } else {
            message.error("账号或者密码错误");
        }
    })
};
const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
};
    return (
        <>
            <Button type="primary" onClick={showModal}>
                登录/注册
            </Button>
            <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width="700px">
                <div className="shade">
                    <div className="sleft">
                        <img src="src/img/zheng.png" alt="" />
                    </div>
                    <div className="sright">
                        <h2>账号密码登录</h2>
                        <Form
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600,marginRight:"80px",marginTop:"20px" }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                label="账号"
                                name="username"
                                rules={[{ required: true, message: '请输入你的账号!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入你的密码!' }]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>

            </Modal>
        </>
    )
}
export default Shade